<script lang="tsx">
import { isBeyond } from '@/components/BasicTree/src/hooks/utls'
import { defineComponent, ref } from 'vue'
import type { JSX } from 'vue/jsx-runtime'

// pdf 下载/浏览/打印组件
export default defineComponent({
  name: 'RenderPdfBtn',
  props: {
    // 文件名
    fileName: {
      type: String,
      required: true,
    },
    // 文件路径
    path: {
      type: String,
      required: true,
    },
    // pdf 图标
    pdfIcon: {
      type: String,
      default: 'a-wenjianpdf',
    },
    //  下载图标
    downIcon: {
      type: String,
      default: 'xiazai',
    },
    // 打印图标
    printIcon: {
      type: String,
      default: 'dayin1',
    },
    //浏览图标
    viewIcon: {
      type: String,
      default: 'yulan11',
    },
    //按钮布局和显示那些按钮
    layout: {
      type: Array as () => string[],
      default: () => ['download', 'print', 'view'],
    },
    // 文字宽度
    fileNameWidth: {
      type: String,
      default: '200px',
    },
    pdfColor: {
      type: String,
      default: '#e7390e',
    },
  },
  setup(props: any) {
    const tooltipVis = ref<boolean>(true)
    const tooltipKey = ref<string>('')

    // 渲染pdf组件
    function renderPdfComponent() {
      const { layout, fileName, path, pdfIcon, viewIcon, printIcon, downIcon, fileNameWidth } =
        props
      let datajsx: JSX.Element = <></>
      layout.forEach((e: string) => {
        if (e == 'download') {
          datajsx = (
            <>
              {datajsx}
              <el-button type="primary" link>
                下载
              </el-button>
            </>
          )
        }
        if (e == 'print') {
          datajsx = (
            <>
              {datajsx}
              <el-button type="primary" link>
                打印
              </el-button>
            </>
          )
        }
        if (e == 'view') {
          datajsx = (
            <>
              {datajsx}
              <el-button type="primary" link>
                预览
              </el-button>
            </>
          )
        }
      })

      return (
        <div class="flex items-center  justify-between ">
          <div class="flex items-center">
            <div class="flex items-center flex-1 " style={{ width: fileNameWidth }}>
              <el-tooltip
                visible={tooltipVis.value && tooltipKey.value == path}
                content={fileName}
                placement="top"
              >
                <span class="pp text-[14px]" onMouseenter={hadnleMouse} onMouseleave={hadnleLeave}>
                  {fileName}
                </span>
              </el-tooltip>
            </div>
          </div>
          <div class="ml-[16px] flex flex-shrink-0">{datajsx}</div>
        </div>
      )
    }
    function hadnleMouse(e: Event) {
      tooltipVis.value = isBeyond(e)
      tooltipKey.value = props.path
    }
    function hadnleLeave() {
      tooltipVis.value = false
      tooltipKey.value = ''
    }
    return () => {
      return renderPdfComponent()
    }
  },
})
</script>
<style lang="scss" scoped>
.pp {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
  line-height: 16px;
}
</style>
